﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta charset="UTF-8">
    <title>AdminSE</title>
    <!-- 站点定义 -->
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <link rel="icon" href="../Content/dist/img/icon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="../Content/dist/img/icon.ico" type="image/x-icon" />
    <style type="text/css">body{font-family:"Microsoft YaHei","Lato","Helvetica Neue",Helvetica,Arial,sans-serif;}</style>
    <!-- 浏览器版本检测 -->
    <script type="text/javascript">
    var browser=navigator.appName;
    var b_version=navigator.appVersion;
    var version=parseFloat(b_version);
    if ((browser=="Microsoft Internet Explorer") && (version<5))
        location.href = 'BrownerToUpdate.html';
    </script>

    <!-- 第三方css -->
    <link href="../Content/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../Content/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../Content/plugins/iCheck/all.css" rel="stylesheet" type="text/css" />
    <link href="../Content/dist/css/AdminLTE.css" rel="stylesheet" type="text/css" />
    <link href="../Content/dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
    <link href="../Content/plugins/toastr/toastr.min.css" rel="stylesheet" type="text/css" />
    <link href="../Content/plugins/highlight/styles/default.css" rel="stylesheet" type="text/css" />
    <link href="../Content/dist/css/base.css" rel="stylesheet" type="text/css" />

    <!-- 页面专属css -->
  </head>
  <body class="skin-blue sidebar-mini">
    <div class="overlay" style="display:none;">
      <div class="loading">
        <div class="loading-center">
          <div class="loading-center-absolute">
            <div class="object object_four"></div>
            <div class="object object_three"></div>
            <div class="object object_two"></div>
            <div class="object object_one"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper">

      <header class="main-header">
        <!-- Logo -->
        <a href="/" class="logo">
          <span class="logo-mini" title="AdminSE"><b>AdminSE</b></span>
          <span class="logo-lg"><b>Admin</b>SE</span>
        </a>
        <!-- 导航头部 -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- 左侧边栏触发按钮-->
          <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button" title="收缩/展开">
            <span class="sr-only">收缩/展开导航</span>
          </a>
          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <!-- 用户帐户栏 -->
              <li class="dropdown user user-menu">
                <a href="" class="dropdown-toggle" data-toggle="dropdown">
                  <img src="../Content/dist/img/DefaultHead.png" class="user-image" alt="头像"/>
                  <span class="hidden-xs">用户名</span>
                </a>
                <ul class="dropdown-menu">
                  <!-- 用户简介 -->
                  <li class="user-header">
                    <a href="#" style="background-color: transparent" title="更换头像">
                      <img src="../Content/dist/img/DefaultHead.png" class="img-circle" alt="User Image" />
                    </a>
                    <p>
                      自定义用户信息
                      <small>备注等内容</small>
                    </p>
                  </li>
                  <li class="user-footer">
                    <div class="pull-left">
                      <a href="#" class="btn btn-primary">编辑</a>
                    </div>
                    <div class="pull-right">
                      <a href="#" class="btn btn-primary">注销</a>
                    </div>
                  </li>
                </ul>
              </li> <!-- end 用户帐户栏 -->
              <!-- 右侧边栏触发按钮 -->
              <li>
                <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
              </li> <!-- end 右侧边栏触发按钮 -->
            </ul>
          </div>
        </nav> <!-- end 导航头部 -->
      </header>

      <!-- 左侧菜单栏 -->
      <aside class="main-sidebar">
        <section class="sidebar">
          <!-- 搜索栏 -->
          <form action="#" method="get" class="sidebar-form">
            <div class="input-group" title="功能未开放">
              <input type="text" name="q" class="form-control" placeholder="请输入搜索内容"/>
              <span class="input-group-btn">
                <button type='button' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
              </span>
            </div>
          </form><!-- end 搜索栏 -->

          <!-- 菜单栏主体 -->
          <ul class="sidebar-menu"></ul>

        </section>
      </aside> <!-- end 左侧菜单栏 -->

      <!-- 页面主体内容 -->
      <div class="content-wrapper">
        <section class="content-header">
          <h1>
            仪表盘
          </h1>
        </section>

        <!-- content -->
        <section class="content" id="DashBoardCharts">
          <div class="row">
            <section class="col-xs-12">
              <div class="box" id="chartjs">
                <div class="box-header">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse">
                    <i class="fa fa-minus"></i>
                  </button>
                  <h3 class="box-title">Chartjs</h3>
                  <small>轻量级图形库（51k），可画6种图形</small>
                </div>
                <div class="box-body">
                  <div class="row">
                    <div class="col-sm-4 press-hover">
                      <h4>折线图</h4>
                      <div id="ChartJSLineChart"></div>
                    </div>
                    <div class="col-sm-4 press-hover">
                      <h4>柱状图</h4>
                      <div id="ChartJSBarChart"></div>
                    </div>
                    <div class="col-sm-4 press-hover">
                      <h4>雷达图</h4>
                      <div id="ChartJSRadarChart"></div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-4 press-hover">
                      <h4>圆环图</h4>
                      <div id="ChartJSDoughnutChart"></div>
                    </div>
                    <div class="col-sm-4 press-hover">
                      <h4>饼状图</h4>
                      <div id="ChartJSPieChart"></div>
                    </div>
                    <div class="col-sm-4 press-hover">
                      <h4>极面积图</h4>
                      <div id="ChartJSPolarChart"></div>
                    </div>
                  </div>
                  <hr />
                  <div class="row bg-gray">
                    <div class="col-sm-12">
                      使用方法：<br />
                      1. 引入js文件：<br />
                      <pre><code class="Html">&lt;script src="Chart.min.js" type="text/javascript"&gt;&lt;/script&gt;</code></pre>
                      2. 创建 canvas 并定义大小：<br />
                      <pre><code class="Html">&lt;canvas height="150px" id="Chart1"&gt;&lt;/canvas&gt;</code></pre>
                      3. 创建 context ：<br />
                      <pre><code class="JavaScript">var ctx = $('#Chart1').get(0).getContext("2d");</code></pre>
                      4. 创建 图形：<br />
                      <pre><code class="JavaScript">new Chart(ctx).<span class='text-blue'>Function</span>(<span class='text-blue'>ChartData</span>, <span class='text-blue'>Options</span>);</code></pre>
                      <!-- <textarea class='form-control' rows="1" readonly="readonly">new Chart(ctx).Function(ChartData, Options);</textarea><br /> -->
                      其中：<br />一、<span class="text-blue">ChartData</span> 根据 <span class="text-blue">Function</span> 类型不同而不同，如下：<br />
                      <pre><code class="JavaScript">1) Function = ['Line', 'Bar', 'Radar']
ChartData = {
  labels : ["a","b","c","d","e"],    //行(x轴)的标签
  datasets : [
    {
      label: "1",    //数据的名字
      fillColor : "rgba(220,120,120,0.5)",  //填充颜色，指线条与x轴组成面积的填充颜色
      strokeColor : "rgba(220,120,120,1)",  //线条(边框)颜色
      pointColor : "rgba(220,120,120,1)",   //数据点的颜色
      pointStrokeColor : "#fff",            //数据点的边框颜色
      pointHighlightFill : "#fff",          //数据点高亮颜色
      pointHighlightStroke : "rgba(220,120,120,1)",   //数据点高亮边框颜色
      data : [100,200,300,400,500]          //数据(必须与 labels 对应数量)
    },
    {
      label: "2",
      fillColor : "rgba(151,187,205,0.5)",
      strokeColor : "rgba(151,187,205,1)",
      pointColor : "rgba(151,187,205,1)",
      pointStrokeColor : "#fff",
      pointHighlightFill : "#fff",
      pointHighlightStroke : "rgba(151,187,205,1)",
      data : [500,200,100,400,240]
    }
  ]
}
2) Function = ['Doughnut', 'Pie', 'PolarArea']
ChartData = [    //value:值,color:扇区颜色,highlight:扇区高光,label:数据名称
  {value: 300,color:"#F7464A",highlight: "#FF5A5E",label: "a"},
  {value: 50,color: "#46BFBD",highlight: "#5AD3D1",label: "b"},
  {value: 100,color: "#FDB45C",highlight: "#FFC870",label: "c"},
  {value: 40,color: "#949FB1",highlight: "#A8B3C5",label: "d"},
  {value: 120,color: "#4D5360",highlight: "#616774",label: "e"}
];</code></pre>
                      二、Options有如下内容(下面显示的是默认值)：<br />
                      <pre><code class="JavaScript">1) 公有选项(只挑一些常用的注释)：
{
  animation: true,    //bool, 是否显示动画
  animationSteps: 60, //int, 动画速度(越大越快)
  // String, 动画效果:
  // [easeInOutQuart, linear, easeOutBounce, easeInBack, easeInOutQuad,
  //  easeOutQuart, easeOutQuad, easeInOutBounce, easeOutSine, easeInOutCubic,
  //  easeInExpo, easeInOutBack, easeInCirc, easeInOutElastic, easeOutBack,
  //  easeInQuad, easeInOutExpo, easeInQuart, easeOutQuint, easeInOutCirc,
  //  easeInSine, easeOutExpo, easeOutCirc, easeOutCubic, easeInQuint,
  //  easeInElastic, easeInOutSine, easeInOutQuint, easeInBounce,
  //  easeOutElastic, easeInCubic]
  animationEasing: "easeOutQuart",

  showScale: true,
  scaleOverride: false,
  scaleSteps: null,    //要求 scaleOverride = true
  scaleStepWidth: null,
  scaleStartValue: null,
  scaleLineColor: "rgba(0,0,0,.1)",
  scaleLineWidth: 1,
  scaleShowLabels: true,
  scaleLabel: "&lt;%=value%&gt;",
  scaleIntegersOnly: true,
  scaleBeginAtZero: false,
  scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
  scaleFontSize: 12,
  scaleFontStyle: "normal",
  scaleFontColor: "#666",

  responsive: false,     //bool, 响应画布变化(当画布大小变化可以自动重绘图形)
  maintainAspectRatio: true,    //bool, 响应变化的时候是否保存原来的高宽比，如否，则会按照容器高宽重绘
  showTooltips: true,    //bool, 是否显示数据标签
  customTooltips: false, //bool, 是否启用自定义数据标签
  tooltipEvents: ["mousemove", "touchstart", "touchmove"],    //array, 显示标签时机
  tooltipFillColor: "rgba(0,0,0,0.8)",    //RGB string 标签背景
  tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",    //string 标签字体
  tooltipFontSize: 14,           //string 标签字体大小
  tooltipFontStyle: "normal",    //string 标签字体样式
  tooltipFontColor: "#fff",      //string 标签字体颜色
  tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",    //string 标签标题字体
  tooltipTitleFontSize: 14,      //string 标签标题字体大小
  tooltipTitleFontStyle: "bold", //string 标签标题字体样式
  tooltipTitleFontColor: "#fff", //string 标签标题字体颜色
  tooltipYPadding: 6,            //float, px, 标签间垂直间距
  tooltipXPadding: 6,            //float, px, 标签文本间距
  tooltipCaretSize: 8,           //float, px, 标签间隔符大小
  tooltipCornerRadius: 6,        //float, px, 标签圆角大小
  tooltipXOffset: 10,            //float, px, 标签x偏移
  tooltipTemplate: "&lt;%if (label){%&gt;&lt;%=label%&gt;: &lt;%}%&gt;&lt;%= value %&gt;",  //string, 标签显示模板
  multiTooltipTemplate: "&lt;%= value %&gt;",

  onAnimationProgress: function(){},    //绘制动画过程中执行回调函数
  onAnimationComplete: function(){}     //绘制动画结束执行回调函数
}
2) Function = 'Line' ，仅举例 Line 和 Bar ，其它请看后面的详细内容
{
  scaleShowGridLines : true,               //bool,是否显示网格
  scaleGridLineColor : "rgba(0,0,0,.05)",  //RGB string, 网格颜色
  scaleGridLineWidth : 1,                  //float, px,网格线宽
  scaleShowHorizontalLines: true,          //bool, 网格附加项，是否显示水平线
  scaleShowVerticalLines: true,            //bool, 网格附加项，是否显示垂直线

  bezierCurve : true,        //bool, 是否是贝斯角点(平滑过渡数据点)
  bezierCurveTension : 0.4,  //float, px, 贝斯角点平滑度
  pointDot : true,           //是否显示数据点
  pointDotRadius : 4,        //float, px, 数据点的大小
  pointDotStrokeWidth : 1,   //float, px, 数据点的边框线宽
  pointHitDetectionRadius : 20,    //float, px, 数据点的攻击判定大小

  datasetStroke : true,            //bool, 是否显示数据线条
  datasetStrokeWidth : 2,          //float, px, 数据线条宽度
  datasetFill : true,              //bool, 是否填充面积图

  //string, 数据显示模板
  legendTemplate : "&lt;ul class=\"&lt;%=name.toLowerCase()%&gt;-legend\"&gt;&lt;% for (var i=0; i&lt;datasets.length; i++){%&gt;&lt;li&gt;&lt;span style=\"background-color:&lt;%=datasets[i].strokeColor%&gt;\"&gt;&lt;/span&gt;&lt;%if(datasets[i].label){%&gt;&lt;%=datasets[i].label%&gt;&lt;%}%&gt;&lt;/li&gt;&lt;%}%&gt;&lt;/ul&gt;"
};
3) Function = 'Bar'
{
  scaleBeginAtZero : true,                 //bool, 是否显示网格
  scaleShowGridLines : true,
  scaleGridLineColor : "rgba(0,0,0,.05)",
  scaleGridLineWidth : 1,
  scaleShowHorizontalLines: true,
  scaleShowVerticalLines: true,
  barShowStroke : true,                   //bool, 柱状图是否显示边框
  barStrokeWidth : 2,
  barValueSpacing : 5,                    //float, px, 柱状图间距
  barDatasetSpacing : 1,
  legendTemplate : "&lt;ul class=\"&lt;%=name.toLowerCase()%&gt;-legend\"&gt;&lt;% for (var i=0; i&lt;datasets.length; i++){%&gt;&lt;li&gt;&lt;span style=\"background-color:&lt;%=datasets[i].fillColor%&gt;\"&gt;&lt;/span&gt;&lt;%if(datasets[i].label){%&gt;&lt;%=datasets[i].label%&gt;&lt;%}%&gt;&lt;/li&gt;&lt;%}%&gt;&lt;/ul&gt;"
};
4) Function = 'Radar'
{
  scaleShowLine : true,
  angleShowLineOut : true,
  scaleShowLabels : false,
  scaleBeginAtZero : true,
  angleLineColor : "rgba(0,0,0,.1)",
  angleLineWidth : 1,
  pointLabelFontFamily : "'Arial'",
  pointLabelFontStyle : "normal",
  pointLabelFontSize : 10,
  pointLabelFontColor : "#666",
  pointDot : true,
  pointDotRadius : 3,
  pointDotStrokeWidth : 1,
  pointHitDetectionRadius : 20,
  datasetStroke : true,
  datasetStrokeWidth : 2,
  datasetFill : true,
  legendTemplate : "&lt;ul class=\"&lt;%=name.toLowerCase()%&gt;-legend\"&gt;&lt;% for (var i=0; i&lt;datasets.length; i++){%&gt;&lt;li&gt;&lt;span style=\"background-color:&lt;%=datasets[i].strokeColor%&gt;\"&gt;&lt;/span&gt;&lt;%if(datasets[i].label){%&gt;&lt;%=datasets[i].label%&gt;&lt;%}%&gt;&lt;/li&gt;&lt;%}%&gt;&lt;/ul&gt;"
}
5) Function = ['Doughnut', 'Pie', 'PolarArea']
{
  segmentShowStroke : true,
  segmentStrokeColor : "#fff",
  segmentStrokeWidth : 2,
  percentageInnerCutout : 50,   //孔的大小比例（Pie的话，此处=0）
  animationSteps : 100,
  animationEasing : "easeOutBounce",
  animateRotate : true,
  animateScale : false,
  legendTemplate : "&lt;ul class=\"&lt;%=name.toLowerCase()%&gt;-legend\"&gt;&lt;% for (var i=0; i&lt;segments.length; i++){%&gt;&lt;li&gt;&lt;span style=\"background-color:&lt;%=segments[i].fillColor%&gt;\"&gt;&lt;/span&gt;&lt;%if(segments[i].label){%&gt;&lt;%=segments[i].label%&gt;&lt;%}%&gt;&lt;/li&gt;&lt;%}%&gt;&lt;/ul&gt;"
}</code></pre>
                      <br />
                      方法使用：<br />
                      首先，在创建图形的时候，需要先将图形赋予某个变量作为Charjs对象。以Line为例：<br />
                      <pre><code class="JavaScript">var myLineChart = new Chart(ctx).Line(data);</code></pre>
                      方法列表：<br />
                      1. .clear()<br />
                      清空图形，在动画过程中用得最多的方法，注意的是，clear之后，该对象依然存在，如果指定了响应式参数，则可能会导致重绘。<br />
                      <pre><code class="JavaScript">myLineChart.clear();    //用法下同，不再重复叙述</code></pre>
                      2. .stop()<br />
                      在动画过程中停止循环，如果要继续，请调用 .render() 方法<br />
                      3. .resize()<br />
                      重置画布大小（重绘），响应式参数仅响应浏览器大小变化，如果容器发生变化将不会响应，因此，这个时候你需要手动调用此方法。<br />
                      4. .destroy()<br />
                      清理Chartjs对象，并且清除所有事件监听。<br />
                      5. .toBase64Image()<br />
                      返回画布的当前状态的png图像。<br />
                      6. .generateLegend()<br />
                      根据标签模板返回一段Html字符串。<br />
                      <p></p>
                      <p>更多内容参见：<a href="http://chartjs.cn/docs/" target="_blank">Chart.js 文档</a></p>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>

          <div class="row">
            <section class="col-xs-12">
              <div class="box" id="Plitly">
                <div class="box-header">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse">
                    <i class="fa fa-minus"></i>
                  </button>
                  <h3 class="box-title">Plitly.js</h3>
                  <small>重量级图形库（1.11M），可画20种图表类型，包括 3D 图表，统计图表，和 SVG 地图。</small>
                </div>
                <div class="box-body">
                  <div class="row">
                    <div class="col-sm-6 press-hover">
                      <h4>折线图</h4>
                      <div id="PlitlyJSLineChart"></div>
                    </div>
                    <div class="col-sm-6 press-hover">
                      <h4>瀑布(柱状)图</h4>
                      <div id="PlitlyJSBarChart"></div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-6">
<pre><code class="JavaScript">var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  mode: 'markers'    //仅点
};
var trace2 = {
  x: [2, 3, 4, 5],
  y: [16, 5, 11, 10],
  mode: 'lines'    //仅线
};
var trace3 = {
  x: [1, 2, 3, 4],
  y: [12, 9, 15, 12],
  mode: 'lines+markers'    //线+点
};
var data = [ trace1, trace2, trace3 ];    //数据列，元素数量表示线条数量

var layout = {
  title:'点线图示例',
  height: 400,
  // width: 480
};    //布局设置，标题、高、宽

Plotly.newPlot('PlitlyJSLineChart', data, layout, option);</code></pre>
                    </div>
                    <div class="col-sm-6">
<pre><code class="JavaScript">var xData = ['Product&lt;br&gt;Revenue', 'Services&lt;br&gt;Revenue',
  'Total&lt;br&gt;Revenue', 'Fixed&lt;br&gt;Costs',
  'Variable&lt;br&gt;Costs', 'Total&lt;br&gt;Costs', 'Total'
];
var yData = [400, 660, 660, 590, 400, 400, 340];
var textList = ['$430K', '$260K', '$690K', '$-120K', '$-200K', '$-320K', '$370K'];

var trace1 = {
  x: xData,
  y: [0, 430, 0, 570, 370, 370, 0],
  marker: {
    color: 'rgba(1,1,1,0.0)'
  },
  type: 'bar'
};
var trace2 = {
  x: xData,
  y: [430, 260, 690, 0, 0, 0, 0],
  type: 'bar',
  marker: {
    color: 'rgba(55,128,191,0.7)',
    line: {
      color: 'rgba(55,128,191,1.0)',
      width: 2
    }
  }
};
var trace3 = {
  x: xData,
  y: [0, 0, 0, 120, 200, 320, 0],
  type: 'bar',
  marker: {
    color: 'rgba(219, 64, 82, 0.7)',
    line: {
      color: 'rgba(219, 64, 82, 1.0)',
      width: 2
    }
  }
};
var trace4 = {
  x: xData,
  y: [0, 0, 0, 0, 0, 0, 370],
  type: 'bar',
  marker: {
    color: 'rgba(50,171, 96, 0.7)',
    line: {
      color: 'rgba(50,171,96,1.0)',
      width: 2
    }
  }
};
var data = [trace1, trace2, trace3, trace4];

var layout = {
  title: '瀑布图示例',
  barmode: 'stack',
  paper_bgcolor: 'rgba(245,246,249,1)',
  plot_bgcolor: 'rgba(245,246,249,1)',
  // width: 480,
  height: 400,
  showlegend: false,
  annotations: []
};

for ( var i = 0 ; i &lt; xData.length ; i++ ) {
  var result = {
    x: xData[i],
    y: yData[i],
    text: textList[i],
    font: {
      family: 'Arial',
      size: 14,
      color: 'rgba(245,246,249,1)'
    },
    showarrow: false
  };
  layout.annotations.push(result);
}

Plotly.newPlot('PlitlyJSBarChart', data, layout, option);</code></pre>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-6 press-hover">
                      <h4>仪表盘</h4>
                      <div id="PlitlyJSGaugeChart"></div>
                    </div>
                    <div class="col-sm-6 press-hover">
                      <h4>等高线图</h4>
                      <div id="PlitlyJSContourChart"></div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-6">
<pre><code class="JavaScript">// Enter a speed between 0 and 180
var level = 175;
// Trig to calc meter point
var degrees = 180 - level,radius = .5;
var radians = degrees * Math.PI / 180;
var x = radius * Math.cos(radians);
var y = radius * Math.sin(radians);

// Path: may have to change to create a better triangle
var mainPath = 'M -.0 -0.025 L .0 0.025 L ',
     pathX = String(x),
     space = ' ',
     pathY = String(y),
     pathEnd = ' Z';
var path = mainPath.concat(pathX,space,pathY,pathEnd);

var data = [{ type: 'scatter',
   x: [0], y:[0],
    marker: {size: 28, color:'850000'},
    showlegend: false,
    name: 'speed',
    text: level,
    hoverinfo: 'text+name'},
  { values: [50/6, 50/6, 50/6, 50/6, 50/6, 50/6, 50],
  rotation: 90,
  text: ['TOO FAST!', 'Pretty Fast', 'Fast', 'Average',
            'Slow', 'Super Slow', ''],
  textinfo: 'text',
  textposition:'inside',      
  marker: {colors:['rgba(14, 127, 0, .5)', 'rgba(110, 154, 22, .5)',
                   'rgba(170, 202, 42, .5)', 'rgba(202, 209, 95, .5)',
                   'rgba(210, 206, 145, .5)', 'rgba(232, 226, 202, .5)',
                   'rgba(255, 255, 255, 0)']},
  labels: ['151-180', '121-150', '91-120', '61-90', '31-60', '0-30', ''],
  hoverinfo: 'label',
  hole: .5,
  type: 'pie',
  showlegend: false
}];

var layout = {
  shapes:[{
      type: 'path',
      path: path,
      fillcolor: '850000',
      line: {
        color: '850000'
      }
    }],
  title: '&lt;b&gt;仪表盘&lt;/b&gt; &lt;br&gt; Speed 0-100',
  height: 400,
  // width: 1000,
  xaxis: {zeroline:false, showticklabels:false,showgrid: false, range: [-1, 1]},
  yaxis: {zeroline:false, showticklabels:false,showgrid: false, range: [-1, 1]}
};

Plotly.newPlot('PlitlyJSGaugeChart', data, layout, option);</code></pre>
                    </div>
                    <div class="col-sm-6">
<pre><code class="JavaScript">var data = [{
  z: [[10, 10.625, 12.5, 15.625, 20],
       [5.625, 6.25, 8.125, 11.25, 15.625],
       [2.5, 3.125, 5., 8.125, 12.5],
       [0.625, 1.25, 3.125, 6.25, 10.625],
       [0, 0.625, 2.5, 5.625, 10]],
  x: [-9, -6, -5 , -3, -1],
  y: [0, 1, 4, 5, 7],
  type: 'contour'
}];

var layout = {
  title: '等高线图示例',
  height: 400
};

Plotly.newPlot('PlitlyJSContourChart', data, layout);</code></pre>
                    </div>
                  </div>
                  <hr />
                  <div class="row" class="bg-gray">
                    <div class="col-sm-12">
                      使用方法：<br />
                      <pre><code class="JavaScript">Plotly.newPlot('HTMLDomID', data, layout, option);</code></pre>
                      其中：<br />
                      data：数据列表，根据每种图形不同而设置不同的数据。<br />
                      layout：含有title、width、height等信息的布局信息。<br />
                      option：一些共有选项，如poltly logo、静态图形、工具栏、缩放响应等<br />
                      <p>更多内容参见：<a href="https://plot.ly/javascript" target="_blank">Plitly.js 文档</a></p>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>

        </section><!-- end content -->
      </div>

      <footer class="main-footer">
        <div class="pull-right hidden-xs">
          <b>Version</b> <span>1.0</span>
        </div>
        <div><a href="https://github.com/huangjunse/AdminSE">Fork On Github</a></div>
      </footer>
      
      <!-- 右侧配置栏 -->      
      <aside class="control-sidebar control-sidebar-dark">                
        <!-- 组合表 -->
        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
          <!-- 默认包含一个control-sidebar-theme-setting-tab，通过theme_setting.js控制 -->
          <!-- 另外，control-sidebar-home-tab是必须存在的，因为是默认表的依赖 -->
          <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
        </ul>
        <!-- 表内容 -->
        <div class="tab-content">
          <!-- 第一个表主体 -->
          <div class="tab-pane" id="control-sidebar-home-tab">
            <h3 class="control-sidebar-heading">附加信息</h3>
            <ul class='control-sidebar-menu'>
              <li>
                <p style="margin: 10px;">
                  <div><a href="https://github.com/huangjunse/AdminSE">Fork On Github</a></div>

                </p>
              </li>
            </ul>
          </div><!-- end 第一个表主体 -->
        </div>
      </aside><!-- end 右侧配置栏 -->
      <div class='control-sidebar-bg'></div>
    </div><!-- ./wrapper -->

    <div class="modal fade modal-danger" id="ErrorModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">错误</h4>
          </div>
          <div class="modal-body" id="ErrorModalBody">
            
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline" onclick="location.reload()">刷新页面</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 开始加载js脚本 -->
    <script src="../Content/plugins/jquery/jquery.min.js"></script>
    <script src="../Content/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../Content/plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
    <script src='../Content/plugins/fastclick/fastclick.min.js'></script>
    <script src='../Content/plugins/iCheck/icheck.min.js'></script>
    <script src="../Content/plugins/toastr/toastr.min.js" type="text/javascript"></script>
    <script src="../Content/plugins/highlight/highlight.min.js" type="text/javascript"></script>
    <script src="../Content/dist/js/base.js" type="text/javascript"></script>
    <script src="../Content/dist/js/mainmenu.js" type="text/javascript"></script>

    <!-- 页面专属js -->
    <script src="../Content/plugins/chartjs/Chart1.0.2.min.js" type="text/javascript"></script>
    <script src="../Content/plugins/plotly/plotly.js" type="text/javascript"></script>
    <script src="../Content/dist/js/pages/DashBoard.js" type="text/javascript"></script>

    <!-- 基础功能及皮肤js，由于依赖的关系，需要页面完全生成完毕才能加载，故放在最后 -->
    <script src="../Content/dist/js/app.min.js" type="text/javascript"></script>
    <script src="../Content/dist/js/theme_setting.min.js" type="text/javascript"></script>
  </body>
</html>